<template>
  <div class="ad-config-management">
    <el-card>
      <div slot="header" class="clearfix">
        <span class="page-title">
          <i class="el-icon-setting"></i>
          广告配置管理
        </span>
        <div class="header-actions">
          <el-button
            type="primary"
            @click="handleAdd"
            icon="el-icon-plus">
            新增配置
          </el-button>
          <el-button style="float: right; padding: 3px 0" type="text" @click="loadConfigList">刷新数据</el-button>
        </div>
      </div>

      <!-- 搜索筛选 -->
      <div class="search-section">
        <el-form :model="searchForm" :inline="true" class="search-form">
          <el-form-item label="平台标识">
            <el-select v-model="searchForm.platform" placeholder="请选择平台" clearable style="width: 150px">
              <el-option label="塔库" value="TAKU"></el-option>
              <el-option label="穿山甲" value="PANGOLIN"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="配置键">
            <el-input v-model="searchForm.configKey" placeholder="请输入配置键" clearable style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px">
              <el-option label="启用" :value="1"></el-option>
              <el-option label="停用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch" icon="el-icon-search">查询</el-button>
            <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 配置列表表格 -->
      <configurable-table
        :columns="tableColumns"
        :data="configList"
        :loading="loading"
        :show-pagination="true"
        :current-page.sync="pagination.current"
        :page-size.sync="pagination.size"
        :pagination-total="pagination.total"
        @page-change="loadConfigList"
        border
        stripe>
        <!-- 平台标识列 -->
        <template #platform="{ row }">
          <el-tag :type="getPlatformType(row.platform)" size="small">
            {{ getPlatformText(row.platform) }}
          </el-tag>
        </template>
        <!-- 配置值列 -->
        <template #configValue="{ row }">
          <span class="config-value" :title="row.configValue">
            {{ truncateText(row.configValue, 30) }}
          </span>
        </template>
        <!-- 状态列 -->
        <template #status="{ row }">
          <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
            {{ row.status === 1 ? '启用' : '停用' }}
          </el-tag>
        </template>
        <!-- 操作列 -->
        <template #actions="{ row }">
          <div class="action-buttons">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(row)">
              查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              class="edit-btn"
              icon="el-icon-edit"
              @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button
              size="mini"
              type="text"
              class="delete-btn"
              icon="el-icon-delete"
              @click="handleDelete(row)">
              删除
            </el-button>
          </div>
        </template>
      </configurable-table>
    </el-card>

    <!-- 新增/编辑配置对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      custom-class="action-dialog"
      top="8vh"
    >
      <div slot="title" class="dialog-title-wrapper">
        <i class="el-icon-edit"></i>
        <span>{{ dialogTitle }}</span>
      </div>

      <el-form :model="form" :rules="formRules" ref="form" label-width="120px" class="config-form">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="平台标识" prop="platform">
              <el-select v-model="form.platform" placeholder="请选择平台" style="width: 100%">
                <el-option label="塔库" value="TAKU"></el-option>
                <el-option label="穿山甲" value="PANGOLIN"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="配置键" prop="configKey">
              <el-autocomplete
                v-model="form.configKey"
                :fetch-suggestions="queryConfigKeys"
                placeholder="请选择或输入配置键"
                style="width: 100%"
                @select="handleConfigKeySelect"
                clearable>
                <template slot-scope="{ item }">
                  <div class="config-key-option">
                    <span class="key-name">{{ item.value }}</span>
                    <span class="key-desc">{{ item.desc }}</span>
                  </div>
                </template>
              </el-autocomplete>
              <div class="form-tip">
                <i class="el-icon-info"></i>
                可从下拉列表选择预定义配置键，或手动输入自定义配置键
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="配置值" prop="configValue">
              <el-input
                v-model="form.configValue"
                type="textarea"
                :rows="3"
                placeholder="请输入配置值"
                maxlength="500"
                show-word-limit>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input-number
                v-model="form.sort"
                :min="0"
                :max="999"
                placeholder="排序值"
                controls-position="right"
                style="width: 100%">
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="签名" prop="sign">
              <el-input v-model="form.sign" placeholder="可选，用于签名校验" maxlength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                :rows="2"
                placeholder="请输入备注说明"
                maxlength="200"
                show-word-limit>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="medium">
          <i class="el-icon-close"></i>
          取消
        </el-button>
        <el-button type="primary" @click="submitForm" :loading="submitLoading" size="medium">
          <i class="el-icon-check"></i>
          确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog
      :visible.sync="detailDialogVisible"
      width="750px"
      :close-on-click-modal="false"
      custom-class="view-dialog"
      top="5vh"
    >
      <div slot="title" class="dialog-title-wrapper">
        <i class="el-icon-view"></i>
        <span>配置详情</span>
      </div>

      <div class="detail-content" v-if="currentConfig">
        <!-- 头部信息卡片 -->
        <div class="detail-header">
          <div class="header-icon">
            <i class="el-icon-setting"></i>
          </div>
          <div class="header-info">
            <h3 class="config-title">{{ getPlatformText(currentConfig.platform) }}</h3>
            <div class="header-meta">
              <div class="meta-item">
                <span class="meta-label">状态：</span>
                <el-tag :type="currentConfig.status === 1 ? 'success' : 'danger'" size="small">
                  {{ currentConfig.status === 1 ? '启用' : '停用' }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>

        <!-- 信息区块 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-setting"></i>
            <span>配置信息</span>
          </div>
          <div class="info-grid">
            <div class="info-item full-width">
              <div class="info-label">
                <i class="el-icon-key"></i>
                <span>配置键</span>
              </div>
              <div class="info-value">{{ currentConfig.configKey }}</div>
            </div>
            <div class="info-item full-width">
              <div class="info-label">
                <i class="el-icon-document"></i>
                <span>配置值</span>
              </div>
              <div class="info-value config-value-detail">{{ currentConfig.configValue || '未设置' }}</div>
            </div>
            <div class="info-item" v-if="currentConfig.sign">
              <div class="info-label">
                <i class="el-icon-lock"></i>
                <span>签名</span>
              </div>
              <div class="info-value">{{ currentConfig.sign }}</div>
            </div>
            <div class="info-item">
              <div class="info-label">
                <i class="el-icon-sort"></i>
                <span>排序</span>
              </div>
              <div class="info-value">
                <el-tag type="info" size="small">{{ currentConfig.sort || 0 }}</el-tag>
              </div>
            </div>
          </div>
        </div>

        <!-- 备注信息 -->
        <div class="info-section" v-if="currentConfig.remark">
          <div class="section-title">
            <i class="el-icon-edit-outline"></i>
            <span>备注说明</span>
          </div>
          <div class="info-content">
            <p class="remark-text">{{ currentConfig.remark }}</p>
          </div>
        </div>

        <!-- 时间信息 -->
        <div class="info-section">
          <div class="section-title">
            <i class="el-icon-time"></i>
            <span>时间信息</span>
          </div>
          <div class="info-grid">
            <div class="info-item" v-if="currentConfig.createTime">
              <div class="info-label">
                <i class="el-icon-date"></i>
                <span>创建时间</span>
              </div>
              <div class="info-value time-value">{{ currentConfig.createTime }}</div>
            </div>
            <div class="info-item" v-if="currentConfig.updateTime">
              <div class="info-label">
                <i class="el-icon-refresh"></i>
                <span>更新时间</span>
              </div>
              <div class="info-value time-value">{{ currentConfig.updateTime }}</div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false" size="medium">
          <i class="el-icon-close"></i>
          关闭
        </el-button>
      </div>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog
      title="删除确认"
      :visible.sync="deleteDialogVisible"
      width="500px"
      :close-on-click-modal="false">
      <div class="delete-content" v-if="currentDeleteConfig">
        <i class="el-icon-warning" style="color: #E6A23C; font-size: 48px; margin-bottom: 20px;"></i>
        <p style="font-size: 16px; margin-bottom: 10px;">确定要删除该配置吗？</p>
        <p style="color: #909399; font-size: 14px;">
          配置键：<strong>{{ currentDeleteConfig.configKey }}</strong>
        </p>
        <p style="color: #909399; font-size: 14px;">
          平台：<strong>{{ getPlatformText(currentDeleteConfig.platform) }}</strong>
        </p>
        <p style="color: #F56C6C; font-size: 13px; margin-top: 15px;">删除后无法恢复，请谨慎操作！</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete" :loading="deleteLoading">确定删除</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAdConfigList,
  addAdConfig,
  editAdConfig,
  deleteAdConfig,
  getAdConfigDetail
} from '@/api/admin/ad-config'

export default {
  name: 'AdConfigManagement',
  data() {
    return {
      loading: false,
      configList: [],

      // 搜索表单
      searchForm: {
        platform: '',
        configKey: '',
        status: null
      },

      // 分页
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },

      // 表格列配置
      tableColumns: [
        // { prop: 'id', label: 'ID', minWidth: 80, align: 'center' },
        { prop: 'platform', label: '平台标识', minWidth: 120, align: 'center', slot: 'platform' },
        { prop: 'configKey', label: '配置键', minWidth: 180, align: 'center', showOverflowTooltip: true },
        { prop: 'configValue', label: '配置值', minWidth: 250, align: 'center', slot: 'configValue', showOverflowTooltip: false },
        { prop: 'sort', label: '排序', minWidth: 80, align: 'center' },
        { prop: 'status', label: '状态', minWidth: 100, align: 'center', slot: 'status' },
        { prop: 'remark', label: '备注', minWidth: 150, align: 'center', showOverflowTooltip: true },
        { prop: 'createTime', label: '创建时间', minWidth: 160, align: 'center' },
        { prop: 'actions', label: '操作', minWidth: 200, align: 'center', slot: 'actions', fixed: false }
      ],

      // 对话框
      dialogVisible: false,
      dialogTitle: '新增配置',
      submitLoading: false,
      isEdit: false,

      // 表单数据
      form: {
        id: null,
        platform: '',
        configKey: '',
        configValue: '',
        sign: '',
        status: 1,
        sort: 0,
        remark: ''
      },

      // 表单验证规则
      formRules: {
        platform: [
          { required: true, message: '请选择平台标识', trigger: 'change' }
        ],
        configKey: [
          { required: true, message: '请输入配置键', trigger: 'blur' },
          { min: 2, max: 100, message: '配置键长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        configValue: [
          { required: true, message: '请输入配置值', trigger: 'blur' },
          { max: 500, message: '配置值长度不能超过 500 个字符', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序值', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      },

      // 详情对话框
      detailDialogVisible: false,
      currentConfig: null,

      // 删除对话框
      deleteDialogVisible: false,
      deleteLoading: false,
      currentDeleteConfig: null,

      // 预定义配置键列表
      predefinedConfigKeys: [
        { value: 'taku_app_id', desc: 'Taku AppId', remark: 'Taku AppId' },
        { value: 'app_id', desc: 'AppId（通用）', remark: 'AppId' },
        { value: 'taku_key', desc: 'Taku Key', remark: 'Taku Key' },
        { value: 'app_key', desc: 'AppKey（通用）', remark: 'AppKey' },
        { value: 'open_ad_id', desc: '开屏广告位ID', remark: '开屏广告位ID' },
        { value: 'open_adv_id', desc: '开屏广告位ID（别名）', remark: '开屏广告位ID' },
        { value: 'motivate_id', desc: '激励视频广告位ID', remark: '激励视频广告位ID' },
        { value: 'reward_video_id', desc: '激励视频广告位ID（别名）', remark: '激励视频广告位ID' },
        { value: 'wx_app_id', desc: '微信AppId', remark: '微信AppId' },
        { value: 'bottom_banner_id', desc: '底部Banner广告位ID', remark: '底部Banner广告位ID' },
        { value: 'banner_bottom_id', desc: '底部Banner广告位ID（别名）', remark: '底部Banner广告位ID' },
        { value: 'top_banner_id', desc: '顶部Banner广告位ID', remark: '顶部Banner广告位ID' },
        { value: 'banner_top_id', desc: '顶部Banner广告位ID（别名）', remark: '顶部Banner广告位ID' },
        { value: 'native_id', desc: '信息流广告位ID', remark: '信息流广告位ID' },
        { value: 'interstitial_id', desc: '插屏广告位ID', remark: '插屏广告位ID' },
        { value: 'is_root', desc: '是否检测Root（0-不检测，1-检测）', remark: '是否检测Root' }
      ]
    }
  },
  mounted() {
    this.loadConfigList()
  },
  methods: {
    // 加载配置列表
    async loadConfigList() {
      this.loading = true
      try {
        Logger.log('=== 加载广告配置列表 ===')

        const params = {
          pageIndex: this.pagination.current,
          pageSize: this.pagination.size,
          ...this.searchForm
        }

        // 移除空值
        Object.keys(params).forEach(key => {
          if (params[key] === '' || params[key] === null || params[key] === undefined) {
            delete params[key]
          }
        })

        Logger.log('请求参数:', params)

        // 如果使用分页接口，使用getAdConfigPage，否则使用getAdConfigList
        // 根据文档，使用GET /agg/ad/config/list
        const response = await getAdConfigList(params)
        Logger.log('配置列表API响应:', response)

        if (response.code === 0) {
          // 如果返回的是数组，直接使用；如果是分页对象，使用list
          if (Array.isArray(response.data)) {
            this.configList = response.data
            this.pagination.total = response.data.length
          } else if (response.data && response.data.list) {
            this.configList = response.data.list || []
            this.pagination.total = response.data.total || 0
          } else {
            this.configList = []
            this.pagination.total = 0
          }
        } else {
          this.$message.error(response.msg || '加载配置列表失败')
          this.configList = []
          this.pagination.total = 0
        }
      } catch (error) {
        Logger.error('加载配置列表失败:', error)
        this.$message.error('加载配置列表失败')
        this.configList = []
        this.pagination.total = 0
      } finally {
        this.loading = false
      }
    },

    // 搜索
    handleSearch() {
      this.pagination.current = 1
      this.loadConfigList()
    },

    // 重置搜索
    handleReset() {
      this.searchForm = {
        platform: '',
        configKey: '',
        status: null
      }
      this.pagination.current = 1
      this.loadConfigList()
    },

    // 新增配置
    handleAdd() {
      this.isEdit = false
      this.dialogTitle = '新增配置'
      this.form = {
        id: null,
        platform: '',
        configKey: '',
        configValue: '',
        sign: '',
        status: 1,
        sort: 0,
        remark: ''
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.clearValidate()
        }
      })
    },

    // 编辑配置
    handleEdit(row) {
      this.isEdit = true
      this.dialogTitle = '编辑配置'
      this.form = {
        id: row.id,
        platform: row.platform,
        configKey: row.configKey,
        configValue: row.configValue,
        sign: row.sign || '',
        status: row.status,
        sort: row.sort || 0,
        remark: row.remark || ''
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.clearValidate()
        }
      })
    },

    // 提交表单
    async submitForm() {
      try {
        await this.$refs.form.validate()
        this.submitLoading = true

        Logger.log('=== 提交配置 ===')
        Logger.log('是否编辑:', this.isEdit)
        Logger.log('表单数据:', this.form)

        const submitData = { ...this.form }

        let response
        if (this.isEdit) {
          response = await editAdConfig(submitData)
        } else {
          response = await addAdConfig(submitData)
        }

        Logger.log('提交配置API响应:', response)

        if (response.code === 0) {
          this.$message.success(this.isEdit ? '配置更新成功' : '配置添加成功')
          this.dialogVisible = false
          this.loadConfigList()
        } else {
          this.$message.error(response.msg || '操作失败')
        }
      } catch (error) {
        if (error !== false) { // 不是表单验证错误
          Logger.error('提交配置失败:', error)
          this.$message.error('操作失败: ' + (error.message || '未知错误'))
        }
      } finally {
        this.submitLoading = false
      }
    },

    // 查看详情
    async handleView(row) {
      try {
        Logger.log('=== 查看配置详情 ===')
        Logger.log('配置ID:', row.id)

        const response = await getAdConfigDetail(row.id)
        Logger.log('配置详情API响应:', response)

        if (response.code === 0) {
          this.currentConfig = response.data
          this.detailDialogVisible = true
        } else {
          // 如果详情接口不存在，直接使用列表数据
          this.currentConfig = row
          this.detailDialogVisible = true
        }
      } catch (error) {
        Logger.error('获取配置详情失败:', error)
        // 如果接口不存在，使用列表数据
        this.currentConfig = row
        this.detailDialogVisible = true
      }
    },

    // 删除配置
    handleDelete(row) {
      this.currentDeleteConfig = row
      this.deleteDialogVisible = true
    },

    // 确认删除
    async confirmDelete() {
      try {
        this.deleteLoading = true

        Logger.log('=== 删除配置 ===')
        Logger.log('配置ID:', this.currentDeleteConfig.id)

        const response = await deleteAdConfig(this.currentDeleteConfig.id)
        Logger.log('删除配置API响应:', response)

        if (response.code === 0) {
          this.$message.success('配置删除成功')
          this.deleteDialogVisible = false
          this.loadConfigList()
        } else {
          this.$message.error(response.msg || '删除失败')
        }
      } catch (error) {
        Logger.error('删除配置失败:', error)
        this.$message.error('删除失败: ' + (error.message || '未知错误'))
      } finally {
        this.deleteLoading = false
      }
    },

    // 获取平台类型（用于标签颜色）
    getPlatformType(platform) {
      const types = {
        'TAKU': 'primary',
        'PANGOLIN': 'success'
      }
      return types[platform] || 'info'
    },

    // 获取平台文本
    getPlatformText(platform) {
      const texts = {
        'TAKU': '塔库',
        'PANGOLIN': '穿山甲'
      }
      return texts[platform] || platform
    },

    // 截断文本
    truncateText(text, maxLength) {
      if (!text) return '-'
      if (text.length <= maxLength) return text
      return text.substring(0, maxLength) + '...'
    },

    // 查询配置键建议
    queryConfigKeys(queryString, cb) {
      const results = queryString
        ? this.predefinedConfigKeys.filter(item => {
            return item.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1 ||
                   item.desc.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
          })
        : this.predefinedConfigKeys
      // 调用 callback 返回建议数据
      cb(results)
    },

    // 处理配置键选择
    handleConfigKeySelect(item) {
      // 自动填充备注（仅在备注为空时）
      if (item && item.remark && !this.form.remark) {
        this.form.remark = item.remark
      }
      // 根据配置键类型设置默认排序值（仅在排序为0时）
      const sortMap = {
        'taku_app_id': 1,
        'app_id': 1,
        'taku_key': 2,
        'app_key': 2,
        'open_ad_id': 3,
        'open_adv_id': 3,
        'motivate_id': 4,
        'reward_video_id': 4,
        'wx_app_id': 5,
        'bottom_banner_id': 6,
        'banner_bottom_id': 6,
        'top_banner_id': 7,
        'banner_top_id': 7,
        'native_id': 8,
        'interstitial_id': 9,
        'is_root': 10
      }
      if (sortMap[item.value] !== undefined && this.form.sort === 0) {
        this.form.sort = sortMap[item.value]
      }
    }
  }
}
</script>

<style scoped>
.ad-config-management {
  padding: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.action-buttons .el-button {
  margin: 0;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.edit-btn {
  color: #E6A23C !important;
}

.edit-btn:hover {
  background-color: #fdf6ec;
  color: #E6A23C !important;
}

.delete-btn {
  color: #F56C6C !important;
}

.delete-btn:hover {
  background-color: #fef0f0;
  color: #F56C6C !important;
}

/* 配置值样式 */
.config-value {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #606266;
  word-break: break-all;
}

/* 表单样式 */
.config-form {
  margin-top: 10px;
}

.form-tip {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding: 8px 12px;
  background: #f0f9ff;
  border-left: 3px solid #409eff;
  border-radius: 4px;
  font-size: 12px;
  color: #606266;
}

.form-tip i {
  margin-right: 6px;
  color: #409eff;
  font-size: 14px;
}

/* ===== 对话框标题样式 ===== */
.dialog-title-wrapper {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.dialog-title-wrapper i {
  margin-right: 8px;
  font-size: 20px;
  color: #409eff;
}

/* ===== 详情对话框样式 ===== */
.detail-content {
  padding: 0;
  max-height: 70vh;
  overflow-y: auto;
}

/* 头部信息区域 */
.detail-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.25);
}

.header-icon i {
  font-size: 28px;
  color: #ffffff;
}

.header-info {
  flex: 1;
  min-width: 0;
}

.config-title {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  word-break: break-all;
  line-height: 1.4;
}

.header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meta-label {
  font-size: 14px;
  color: #909399;
  font-weight: 500;
}

.meta-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  font-family: 'Courier New', monospace;
}

/* 信息区块 */
.info-section {
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}

.info-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #e4e7ed;
  font-weight: 600;
  font-size: 14px;
  color: #303133;
}

.section-title i {
  font-size: 16px;
  color: #409eff;
}

.info-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item.full-width {
  grid-column: 1 / -1;
}

.info-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #909399;
  font-weight: 500;
}

.info-label i {
  font-size: 14px;
  color: #c0c4cc;
}

.info-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
  min-height: 36px;
  display: flex;
  align-items: center;
  word-break: break-all;
}

.info-value:hover {
  background: #f0f2f5;
  border-color: #d4d7dc;
}

.config-value-detail {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-all;
}

.time-value {
  font-size: 13px;
  color: #606266;
}

.info-content {
  padding: 20px;
}

.remark-text {
  margin: 0;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  color: #606266;
  line-height: 1.6;
}

/* 删除确认对话框 */
.delete-content {
  text-align: center;
  padding: 20px 0;
}

/* ===== 对话框底部样式 ===== */
.dialog-footer {
  text-align: center;
  padding: 16px 0 0;
  border-top: 1px solid #f0f0f0;
}

.dialog-footer .el-button {
  min-width: 100px;
  padding: 10px 20px;
  font-weight: 500;
}

.dialog-footer .el-button i {
  margin-right: 4px;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

/* 自定义滚动条 */
.detail-content::-webkit-scrollbar {
  width: 6px;
}

.detail-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.detail-content::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* 卡片头部样式 */
.el-card__header {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #dee2e6;
  border-radius: 8px 8px 0 0;
}

.el-card__header .clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 配置键选项样式 */
.config-key-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.config-key-option .key-name {
  font-weight: 500;
  color: #303133;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.config-key-option .key-desc {
  color: #909399;
  font-size: 12px;
  margin-left: 12px;
}
</style>

